<template>
  <u-navbar
    :title="title"
    :auto-back="true"
    :bg-color="bgColor"
    :title-style="{ color: titleColor, fontSize: '32rpx' }"
    :left-icon-color="leftIconColor"
    :fixed="true"
    :placeholder="true"
  />
</template>

<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'theme',
  },
});

const bgColor = computed(() => {
  if (props.type === 'theme') {
    return '#bc4242';
  }
  return '#fff';
});

const titleColor = computed(() => {
  if (props.type === 'theme') {
    return '#fff';
  }
  return '#000';
});

const leftIconColor = computed(() => {
  if (props.type === 'theme') {
    return '#fff';
  }
  return '#000';
});
</script>

<style lang="scss" scoped>
//
</style>
